
<div class="tab-group flex mt-10" data-dui-orientation="vertical">
  <div role="tablist" class="relative bg-stone-100 rounded-lg flex flex-col p-1">
    <div class="absolute top-0 left-0 right-0 mx-1 w-auto bg-white rounded-md shadow-sm transition-all duration-300 transform scale-x-0 translate-x-0 tab-indicator z-0"></div>
    <a href="#" class="tab-link text-sm active px-4 py-2 text-gray-700 relative" data-dui-tab-target="tab-vertical-html">HTML</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-gray-700 relative" data-dui-tab-target="tab-vertical-react">React</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-gray-700 relative" data-dui-tab-target="tab-vertical-vue">Vue</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-gray-700 relative" data-dui-tab-target="tab-vertical-angular">Angular</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-gray-700 relative" data-dui-tab-target="tab-vertical-svelte">Svelte</a>
  </div>
  <div id="tab-vertical-html" class="tab-content text-stone-500 text-sm block p-4">Content HTML</div>
  <div id="tab-vertical-react" class="tab-content text-stone-500 text-sm hidden p-4">Content React</div>
  <div id="tab-vertical-vue" class="tab-content text-stone-500 text-sm hidden p-4">Content Vue</div>
  <div id="tab-vertical-angular" class="tab-content text-stone-500 text-sm hidden p-4">Content Angular</div>
  <div id="tab-vertical-svelte" class="tab-content text-stone-500 text-sm hidden p-4">Content Svelte</div>
</div>
